<template>
 <div class="container" style="background-color:#f4f4f4;">
   <div class="announcement">
     <ul>
       <img src="../assets/laba.gif" style="position:absolute;width:40px;height:40px;padding-top:10px;margin-left:-50px;" alt="">
       <li class="message" v-for="(item,index) in items" v-bind:key="(index)">{{item.message}}</li>
     </ul>
   </div>
   <!-- 文化站中间分类板块 -->
    <section class="content">
      <div class="category">
        <router-link to="/about" href="#" class="title">关于文化站
          <img src="../assets/about.png" alt="" style="width:50px;height:50px;margin-top:10px;position:absolute;margin-left:-130px;" />
          <p class="text">众安文化与技术交流中心</p>
        </router-link>
      </div>
       <div class="category">
        <router-link to="/project/stat" class="title">技术评奖
          <img src="../assets/Projects.png" alt="" style="width:50px;height:45px;margin-top:10px;position:absolute;margin-left:-130px;" />
          <p class="text">2017年度众安技术评奖</p>
        </router-link>
      </div>
      <div class="category">
        <a href="http://itech.zhonganonline.com" target="_blank" class="title">中间件
          <img src="../assets/middle-store.png" alt="" style="width:50px;height:50px;margin-top:10px;position:absolute;margin-left:-120px;" />
          <p class="text">中间件产品介绍中心</p>
        </a>
      </div>
      <div class="category">
        <router-link to="/know-how/answers" href="#" class="title">问答
          <img src="../assets/ask-answer.png" alt="" style="width:50px;height:45px;margin-top:10px;position:absolute;margin-left:-110px;" />
          <p class="text">你的问题我来回答</p>
        </router-link>
      </div>
      <div class="category">
        <router-link to="/Know-how/Coursegroup" href="#" class="title">云课堂
          <img src="../assets/course.png" alt="" style="width:50px;height:45px;margin-top:10px;position:absolute;margin-left:-110px;" />
          <p class="text">视频分享点播中心</p>
        </router-link>
      </div>
    </section>

 </div>
</template>
<script>
export default {
  name:"Category",
  data () {
    return {
      items:[
        {message:"众安+即将发布，敬请期待！！！"},
        {message:"新增问答功能"},
        {message:"新增视频功能"},
      ]
    }
  },
  created () {
     setInterval(this.scroll,2000)
  },
  methods: {
      scroll(){
       this.animate=true;   
       setTimeout(()=>{  
               this.items.push(this.items[0]);  
               this.items.shift();              
               this.animate=false; 
       },2000)
    }
  }
}
</script>
<style scoped>
.container {
  width: 100vw;
}
.announcement{
  width: 70vw;
  height: 50px;
  margin: 0 auto;
  padding-left: 60px;
  margin-top: 70px;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  overflow: hidden;
  background-color: rgba(143, 185, 240, 0.9);
  position: relative;
}
/* 更新消息 */
.message{
  display: block;
  width: 70vw;
  margin-left: -60px;
  padding-left: 50px;
  line-height: 50px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
/* 中间分类板块 */
.content {
  width: 70vw;
  height: 330px;
  margin: 0 auto;
  margin-left: 15vw;
  margin-right: 15vw;
  position: relative;
}
.content .category {
  width: 15vw;
  height: 80px;
  float: left;
  margin: 0.5vw;
  margin-left: 15px;
  margin-top: 15px;
  border-radius: 10px;
  position: relative;
  background-color: #fff;
}
/* 分类板块滤镜效果 */
.content .category:hover {
  -webkit-filter: drop-shadow(0px 0px 5px #02a8f5);
  filter: drop-shadow(0px 0px 5px #02a8f5);
}
.content .category a:hover {
  color: #02a8f5;
}
.content .category .title {
  display: inline-block;
  width: 8vw;
  height: 30px;
  position: absolute;
  left: 90px;
  font-size: .9375rem;
  text-align: left;
  color: #333;
  margin: 0 auto;
  line-height: 30px;
}
.category .text {
  width: 9vw;
  height: 40px;
  line-height: 20px;
  position: absolute;
  font-size: .8125rem;
  margin-top: 10px;
  color: #999;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.category .text:hover {
  cursor: pointer;
  color: #02a8f5;
}
.category:nth-child(9),
.category:nth-child(10),
.category:nth-child(11),
.category:nth-child(12) {
  visibility: hidden;
}
</style>
